<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>

  <script>
    // 3.没有块级作用域引起的问题:for的块级
    // var btns = document.getElementsByTagName('button');
    // for (var i = 0; i < btns.length; i++) {
    //   // btns[i].addEventListener('click', function () {
    //   //   console.log('第' + i + '被点击'); // 全是5
    //   // })


    //   // 为什么闭包可以解决我们的问题?
    //   // 因为函数是一个作用域
    //   (function (i) {
    //     btns[i].addEventListener('click', function () {
    //       console.log('第' + i + '被点击');
    //     })
    //   })(i)
    // }


    // var name = 'why'

    // function abc(name) {
    //   // 优先使用的是我作用域里面的name
    //   console.log(name);
    // }

    // name = 'kobe'
    // abc('aaaa')


    // ES6
    const btns = document.getElementsByTagName('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        console.log(i);
      })
    }
  </script>
</body>

</html>